<template>
  <div class="zhubo" v-if="userInfo">
    <c-title :title="title"></c-title>
    <div class="zb_com">
      <div class="zb_info">
        <div class="img" @click="goZhubo">
          <img v-lazy="userInfo.img" alt="" />
          <span class="icon">V{{ userInfo.anchorGrade }}</span>
        </div>
        <div class="info" @click="goZhubo">
          <div class="nickname">
            {{ userInfo.nickname }}
          </div>
          <div class="des">
            {{ userInfo.des }}
          </div>
          <div class="count" v-if="userInfo.statCountInfo">
            <van-icon name="gift-o" />{{
              userInfo.statCountInfo.followerCount | getCount
            }}
          </div>
        </div>
        <div class="add">
          <p class="add_icon">
            <i class="font_family icon-a-tianjiaguanzhu"></i>
          </p>
          <p class="add_text">加关注</p>
        </div>
      </div>
      <ul class="zb_wrap">
        <li v-for="item in userListAlbum" :key="item.id">
          <a>
            <v-item
              :id="item.id"
              :img="item.img"
              :title="item.title"
              :des="item.des"
              :countInfo="item.countInfo"
            ></v-item>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { initZbData } from "@/request/api.js";

export default {
  data() {
    return {
      title: "主播信息",
    };
  },
  props: {
    userInfo: {
      type: Object,
    },
    userListAlbum: {
      type: Array,
    },
  },
  created() {},
  methods: {
    goZhubo() {
      this.$router.push("/zhubo/" + this.userInfo.anchorId);
    },
  },
};
</script>

<style lang="scss" scoped>
.zhubo {
  padding: 15px;

  .zb_com {
    .zb_info {
      margin-top: 7px;
      height: 66px;
      display: flex;

      .img {
        width: 54px;
        height: 54px;
        position: relative;
        > img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .icon {
          display: inline-block;
          left: 50%;
          transform: translateX(-50%);
          bottom: -6px;
          position: absolute;
          font-size: 12px;
          padding: 0 5px;
          color: #fff;
          height: 16px;
          line-height: 16px;
          border-radius: 8px;
          background-color: #f24821;
        }
      }
      .info {
        flex: 1;
        padding: 0 20px 0 10px;
        .nickname,
        .des {
          width: 220px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .nickname {
          color: #333;
          font-size: 16px;
        }
        .des {
          color: #999;
          font-size: 12px;
          margin: 2px 0px 4px;
        }
        .count {
          color: #bbb;
          font-size: 12px;
        }
      }
      .add {
        width: 36px;
        height: 40px;
        p {
          text-align: center;
          color: #f86442;
        }
        .add_text {
          font-weight: 400;
          margin-top: -2px;
          font-size: 12px;
        }
        .add_icon {
          > i {
            font-size: 24px;
          }
        }
      }
    }
    .zb_wrap {
      padding: 27px 10px 0 0;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 91px;
        margin-right: 29px;
        a {
          display: block;
        }
      }
      li:nth-child(3){
        margin-right:0 ;
      }
    }
  }
}
/deep/.v-item {
  width: 91px;
  .img {
    width: 91px;
    height: 91px;
  }
}
</style>

